<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>我要买</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/statics/layui/css/layui.css" media="all">
</head>

<body>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>我要买</legend>
  </fieldset>
  <div class="layui-form">
    币种：
    <div class="layui-inline" style="width: 150px;">
      <select id="typeId" name="typeId"></select>
    </div>
    <button class="layui-btn" id="btnSearch">搜索</button>
  </div>
  <table class="layui-hide" id="dg" lay-filter="dg"></table>
  <script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="buy">买入</a>
  </script>

  <script src="/statics/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="../js/config.js"></script>
  <script type="text/javascript" src="../js/utils.js"></script>
  <script>

    $(function () {

      $("#typeId").append("<option value=''>——全部——</option>");
      DataUtils.getMoneyTypeList(function (data) {
        if (data && data.length > 0) {
          $.each(data, function (i, item) {
            $("#typeId").append("<option value='" + item.typeId + "'>" + item.typeName + "</option>");
          });
        }
        init();
      });

      var init = function () {
        layui.use(['table', 'layer'], function () {
          var table = layui.table, layer = layui.layer;


          table.render({
            elem: '#dg',
            url: Config.WEB_SERVER_API + Config.URI.USER_MONEY_SELL_OTHER,
            request: {
              pageName: 'offset' //页码的参数名称，默认：page
              , limitName: 'limit' //每页数据量的参数名，默认：limit
            },
            cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
              { field: 'typeName', title: '币种' },
              { field: 'leaveMoney', title: '可买数量' },
              { field: 'buyTypeName', title: '接受币种' },
              { field: 'realName', title: '卖方姓名' },
              { fixed: 'right', title: '操作', toolbar: '#bar', width: 150 }
            ]],
            id: 'dg',
            page: false, loading: true,
            response: {
              statusCode: "200" //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
              return {
                "code": parseInt(res.resultCode), //解析接口状态
                "msg": res.resultMsg, //解析提示文本
                "count": res.total, //解析数据长度
                "data": res.rows //解析数据列表
              };
            }
          });

          var loadData = function () {
            //这里以搜索为例
            table.reload("dg", {
              where: { //设定异步数据接口的额外参数，任意设
                typeId: $("#typeId").val()
              }
              , page: {
                curr: 1 //重新从第 1 页开始
              }
            });
          }

          $("#btnSearch").on('click', function () {
            loadData();
          });


          //监听行工具事件
          table.on('tool(dg)', function (obj) {
            var data = obj.data;
            if (obj.event === 'buy') {
              var t = new Date().getTime();
              layer.open({
                type: 2
                , title: '我要买'
                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                , area: ['400px', '320px']
                , id: 'layerDemo' //防止重复弹出
                , content: 'mybuyadd.html?t=' + t + '&id=' + data.id
                , shade: 0.2 //不显示遮罩
                , yes: function () {
                  layer.closeAll();
                }
              });
            }
          });

        });
      }

    });


  </script>

</body>

</html>